<!--
 * @Description:right
 * @Version: 2.0
 * @Autor: kafei
 * @Date: 2021-12-10 17:13:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 19:02:03
-->
<template>
  <div
    v-loading="loading"
    class="systemRoute__right"
  >
    <div class="header">
      <ButtonConfig
        :button-data="actionData"
        @click="btnClick"
      />
    </div>
    <div class="rightContent-form">
      <!-- :init-form-data="initFormData" -->

      <Form
        ref="Form"
        v-model="initFormData"
        :item-data="formData"
        :rules="rules"
        :form-config="formConfig"
      />
    </div>
  </div>
</template>

<script>
import ButtonConfig from '@/components/ButtonConfig/index.vue'
import { formData } from './formData'
import { getListToRules } from '@/utils/index.js'
import Form from '@/components/Form/index.vue'
import { getMenuById, updateMenu, addMenu, delMenu } from '@/api/menu.js'
export default {
  name: 'RightContent',
  components: {
    ButtonConfig,
    Form
  },
  data () {
    return {
      actionData: [
        { type: 'primary', text: '保存', actionType: 'save' },
        { type: 'add', text: '新增子节点', actionType: 'addChildren' },
        { type: 'warning', text: '删除', actionType: 'delete' },
        { type: 'danger', text: '清除选择', actionType: 'notChose' }
      ],
      formData,
      rules: {},
      initFormData: {},
      formConfig: {},
      loading: false,
      currentComponentPath: ''
    }
  },
  created () {
    this.rules = getListToRules(formData)
  },
  methods: {
    btnClick (item) {
      if (item.actionType === 'notChose') {
        this.$emit('reset')
      } else if (item.actionType === 'save') {
        this.saveFun()
      } else if (item.actionType === 'addChildren') {
        this.addChildrenFun()
      } else if (item.actionType === 'delete') {
        this.deleteFun()
      }
      this.$emit('btnClick', item)
    },
    deleteFun () {
      const node = this.$parent.node
      console.log(node)
      if (!node.mName) {
        this.$message({
          type: 'warning',
          message: '请选择元素!'
        })
        return
      }
      this.$confirm(`此操作将永久删除菜单${node.mName}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delMenu({ id: this.$parent.treeValue })
        if (res.code === '0') {
          this.$message.success('操作成功!')
          this.$emit('saveSuccess')
        }
      })
    },
    addChildrenFun () {
      if (!this.$parent.treeValue) {
        this.$message.warning('请选择根节点!')
        return
      }
      this.initFormData = {}
    },
    async saveFun () {
      const status = this.$refs.Form.validator()
      console.log(this.initFormData, 'this.initFormDatathis.initFormData', this.$parent.treeValue)
      if (status) {
        const api = this.initFormData.id ? updateMenu : addMenu
        const data = this.initFormData.id ? this.initFormData : { ...this.initFormData, ...{ parentId: this.$parent.treeValue } }
        console.log(data, 'asdasdsa')
        const res = await api(data)
        if (res.code === '0') {
          this.$message.success('操作成功!')
          this.$emit('saveSuccess')
        }
      } else {
        this.$message.error('请输入校验输入信息!')
      }
    },
    // 设置组件路径状态
    setComponentPath (nVal) {
      if (nVal && nVal === '1') {
        this.$delete(this.rules, 'componentPath')
        this.setComponentPathStatus(true)
        this.$refs.Form.clearValidate('componentPath')
      } else {
        this.rules = getListToRules(formData)
        this.setComponentPathStatus(false)
      }
    },
    setComponentPathStatus (status) {
      const targetComponentPath = this.formData.find(v => v.props === 'componentPath')
      if (targetComponentPath) {
        this.$set(targetComponentPath.config, 'disabled', status)
      }
    },
    setFormDisabled (status) {
      this.formData.forEach(v => {
        this.$set(v.config, 'disabled', status)
      })
    },
    async getMenuByIdFun (id) {
      this.loading = true
      if (id) {
        this.initFormData = {}
        const res = await getMenuById({ id })
        if (res.code === '0') {
          this.initFormData = res.data[0]
        }
      } else {
        this.initFormData = {}
      }
      this.loading = false
    }
  }
}
</script>

<style>

</style>
